<template>
    <div class="navmenu" >
        <el-row class="navbox row-bg" type="flex">
            <el-col :span="6"></el-col>
            <el-col :span="12">
                <el-row style="text-align: center; color: aquamarine; font-size: 50px;margin-bottom: 50px;">自然灾害综合风险调查评估系统</el-row>
                <el-row :gutter="12" class="navitem">
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="用户管理中心" />
                                </div>
                                <div style="width: 100%; text-align: center;">用户管理中心</div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="用户帮助中心" />
                                </div>
                                <div style="width: 100%; text-align: center;">用户帮助中心</div>
                            </div>
                            
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="区划底图更新" />
                                </div>
                                <div style="width: 100%; text-align: center;">区划底图更新</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="12" class="navitem">
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="数据调查" />
                                </div>
                                <div style="width: 100%; text-align: center;">数据调查</div>
                            </div>
                            
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="数据浏览" />
                                </div>
                                <div style="width: 100%; text-align: center;">数据浏览</div>
                            </div>
                            
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="item">
                            <div>
                                <div class="container">
                                    <img src="@/assets/image/ditugengxin.jpg" alt="数据统计展示" />
                                </div>
                                <div style="width: 100%; text-align: center;">数据统计展示</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6"></el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
    components: {
    }
})
export default class NavMenu extends Vue {

}
</script>

<style scoped lang="scss">
.navmenu {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    height: 100%;
    background-image: url("../assets/image/homepage.png");
    background-size: cover;
}

.navitem {
    display: flex;
    width: 100%;

}

.navbox {
    width: 100%;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
}

.container {
    text-align: center;
}

.container img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}
.item{
    cursor: pointer;
    background-color: #fff;
}
.item :hover{
    background-color: aquamarine;
}
</style>